<template>
  <el-container class="home_container">
    <el-header>
      <div>
        <span class="logo">车联网后台系统</span>
      </div>
      <div>
        <el-button size="medium" @click="getTAInfo">获取用户数量</el-button>
        <el-button size="medium" @click="getRSUInfo">获取RSU信息</el-button>
        <el-button size="medium" @click="getNSPInfo">获取NSP信息</el-button>
        <el-button size="medium" @click="getMaliciousUserInfo">获取恶意用户身份信息</el-button>
      </div>
      <div>
        {{this.$store.state.currentUser}}
        <el-button type="primary" class="btn" size="medium" @click="exit">
          <i class="el-icon-coordinate" style="font-size: 15px;"></i> 退出
        </el-button>
      </div>
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="22" :offset="1">
          <el-row :gutter="20" class="mgb20">
            <el-col :span="8">
              <el-card shadow="hover" :body-style="{padding: '0px'}">
                <div class="grid-content grid-con-1">
                  <i class="el-icon-s-custom grid-con-icon"></i>
                  <div class="grid-cont-right">
                    <div class="grid-num" v-text="userCount"></div>
                    <div>系统用户数量</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" :body-style="{padding: '0px'}">
                <div class="grid-content grid-con-2">
                  <i class="el-icon-error grid-con-icon"></i>
                  <div class="grid-cont-right">
                    <div class="grid-num" v-text="maliciousUserCount"></div>
                    <div>系统恶意用户数量</div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="hover" :body-style="{padding: '0px'}">
                <div class="grid-content grid-con-3">
                  <i class="el-icon-timer grid-con-icon"></i>
                  <div class="grid-cont-right">
                    <div class="grid-num" v-text="te">></div>
                    <div>当前时间周期</div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <span>RSU</span>
            </div>
            <el-table
              :data="RSU_List"
              border
              class="table"
              ref="multipleTable"
              header-cell-class-name="table-header"
              show-header="true"
              style="width:100%;"
              @selection-change="handleSelectionChange"
            >
              <el-table-column prop="id" label="序号" width="55" align="center"></el-table-column>
              <el-table-column prop="name" label="参数" align="center"></el-table-column>
              <el-table-column prop="number" label="数值" align="center"></el-table-column>
            </el-table>
          </el-card>
          <br />
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <span>NSP</span>
            </div>

            <el-table
              :data="NSP_List"
              border
              class="table"
              ref="multipleTable"
              header-cell-class-name="table-header"
              show-header="true"
              style="width:100%;"
              @selection-change="handleSelectionChange"
            >
              <el-table-column prop="id" label="序号" width="55" align="center"></el-table-column>
              <el-table-column prop="name" label="参数" align="center"></el-table-column>
              <el-table-column prop="number" label="数值" align="center"></el-table-column>
            </el-table>
          </el-card>
          <br />
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <span>恶意用户</span>
            </div>

            <el-table
              :data="maliciousUserInfo"
              border
              class="table"
              ref="multipleTable"
              header-cell-class-name="table-header"
              show-header="true"
              style="width:100%;"
              @selection-change="handleSelectionChange"
            >
              <el-table-column label="车牌号" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.idCar }}</span>
                </template>
              </el-table-column>
              <el-table-column label="身份证号" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.idNumber }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      userCount: 0,
      maliciousUserCount: 0,
      maliciousUserInfo: [],

      te: 0,
      RSUNaviCount: 0,
      RSUNaviValidCount: 0,
      RSUReportRequestCount: 0,
      RSUReportRequestValidCount: 0,
      RSUReportValidCount: 0,
      RSUNaviCount_Last: 0,
      RSUNaviValidCount_Last: 0,
      RSUReportRequestCount_Last: 0,
      RSUReportRequestValidCount_Last: 0,
      RSUReportValidCount_Last: 0,
      RSUReportRequestValidCount_temp: 0,

      NSPtrafficInfoCount: 0,
      NSPNaviCount: 0,
      NSPtrafficInfoCount_Last: 0,
      NSPNaviCount_Last: 0,

      RSU_List: [

        {
          id: "1",
          name: "接收到有效导航查询数量",
          number: 0,
        },
        {
          id: "2",
          name: "接收到无效导航查询数量",
          number: 0,
        },
        {
          id: "3",
          name: "接收到路况报告数量",
          number: 0,
        },
        {
          id: "4",
          name: "过滤后有效路况报告数量",
          number: 0,
        },
        {
          id: "5",
          name: "过滤后虚假路况报告数量",
          number: 0,
        },
        {
          id: "6",
          name: "当前时间周期路况报告数量",
          number: 0,
        },
        {
          id: "7",
          name: "上一时间周期接收到有效导航查询数量",
          number: 0,
        },
        {
          id: "8",
          name: "上一时间周期接收到无效导航查询数量",
          number: 0,
        },
        {
          id: "9",
          name: "上一时间周期接收到路况报告数量",
          number: 0,
        },
        {
          id: "10",
          name: "上一时间周期过滤后有效路况报告数量",
          number: 0,
        },
        {
          id: "11",
          name: "上一时间周期过滤后虚假路况报告数量",
          number: 0,
        },
        {
          id: "12",
          name: "最近一次导航查询查询点数量",
          number: 0,
        },
      ],

      NSP_List: [
        {
          id: "1",
          name: "接收路况信息总数量",
          number: 0,
        },
        {
          id: "2",
          name: "接收路况查询请求总数量",
          number: 0,
        },
        {
          id: "3",
          name: "上一时间周期接收路况信息数量",
          number: 0,
        },
        {
          id: "4",
          name: "上一时间周期路况查询请求数量",
          number: 0,
        },
        {
          id: "5",
          name: "最近一次路况查询查询点数量",
          number: 0,
        },
      ],
    };
  },

  methods: {
      handleSelectionChange(){

      },
    exit() {
      //    重置vuex
      this.$store.dispatch("setUser", null);
      this.$store.dispatch("setToken", null);

      //    跳转到登录页面
      this.$router.push("/");

      //    提示
      this.$message({
        message: "成功退出登录",
        type: "success",
      });
    },

    // getData() {
      //获得数据显示到表格
      // this.RSU_List[0].number = this.RSUNaviCount; //接收导航查询请求总次数
      // this.RSU_List[1].number = this.RSUNaviValidCount;//接收到有效导航查询次数
      // this.RSU_List[2].number = this.RSUReportRequestCount;
      // this.RSU_List[3].number = this.RSUReportRequestValidCount;
      // this.RSU_List[4].number = this.RSUReportValidCount;
      // this.RSU_List[5].number = this.RSUNaviCount_Last;
      // this.RSU_List[6].number = this.RSUNaviValidCount_Last;
      // this.RSU_List[7].number = this.RSUReportRequestCount_Last;
      // this.RSU_List[8].number = this.RSUReportRequestValidCount_Last;
      // this.RSU_List[9].number = this.RSUReportValidCount_Last;
      // this.RSU_List[0].number = this.RSUNaviValidCount;//接收到有效导航查询次数
      // this.RSU_List[1].number = this.RSUNaviCount - this.RSUNaviValidCount;//接收到无效导航查询次数
      // this.RSU_List[2].number = this.RSUReportRequestValidCount;//接收到路况报告数量
      // this.RSU_List[3].number = this.RSUReportValidCount;//过滤后有效路况报告数量
      // this.RSU_List[4].number = this.RSUReportRequestValidCount - this.RSUReportValidCount;//过滤后虚假路况报告数量
      // this.RSU_List[5].number = this.RSUReportRequestValidCount_temp;//过滤后虚假路况报告数量
      // this.RSU_List[6].number = this.RSUReportRequestValidCount_temp;//当前时间周期路况报告数量
      // this.RSU_List[7].number = this.RSUNaviCount_Last - this.RSUNaviValidCount_Last;//上一时间周期接收到无效导航查询次数
      // this.RSU_List[8].number = this.RSUReportRequestValidCount_Last;//上一时间周期接收到路况报告数量
      // this.RSU_List[9].number = this.RSUReportValidCount_Last;//上一时间周期过滤后有效路况报告数量
      // this.RSU_List[10].number = this.RSUReportRequestValidCount_Last - this.RSUReportValidCount_Last;//上一时间周期过滤后虚假路况报告数量
      // this.NSP_List[0].number = this.NSPtrafficInfoCount;
      // this.NSP_List[1].number = this.NSPNaviCount;
      // this.NSP_List[2].number = this.NSPtrafficInfoCount_Last;
      // this.NSP_List[3].number = this.NSPNaviCount_Last;
    // }, 
    //获取TA监控信息
    getTAInfo() {
      //向后端接口发起POST请求
      this.$http
        .post("TAuserCount", { token: this.$store.state.token })
        .then((res) => {
          //在控制台打印一下后端接口返回的数据
          console.log(res.data);
          //判断请求结果
          if (res.data.result) {
            //将返回的数据存放到data的变量中
            this.userCount = res.data.userCount;
            this.maliciousUserCount = res.data.maliciousUserCount;
          } else {
            //请求失败 提醒用户
            this.$message({
              message: "请登录",
              type: "error",
            });
          }
        });
    },

    //获取恶意用户监控信息
    getMaliciousUserInfo() {
      this.$http
        .post("TAMaliciousUserInfo", { token: this.$store.state.token })
        .then((res) => {
          //在控制台打印一下后端接口返回的数据
          console.log(res.data);
          if (res.data.result) {
            this.maliciousUserInfo = res.data.maliciousUserInfo;
          } else {
            this.$message({
              message: "请登录",
              type: "error",
            });
          }
        });
    },

    //获取RSU监控信息
    getRSUInfo() {
      this.$http
        .post("RSUInfo", { token: this.$store.state.token })
        .then((res) => {
          //在控制台打印一下后端接口返回的信息
          console.log(res.data);
          if (res.data.result) {
            this.te = res.data.te; //当前时间历元
            // this.RSUNaviCount = res.data.RSUNaviCount;//RSU接收导航查询请求总次数
            // this.RSUNaviValidCount = res.data.RSUNaviValidCount;//RSU接收有效导航查询请求次数
            // this.RSUReportRequestCount = res.data.RSUReportRequestCount;//RSU接收提交路况报告请求次数
            // this.RSUReportRequestValidCount = res.data.RSUReportRequestValidCount;//RSU接收有效提交路况报告请求次数
            // this.RSUReportValidCount = res.data.RSUReportValidCount;//RSU过滤后有效路况报告数量
            // this.RSUNaviCount_Last = res.data.RSUNaviCount_Last;//RSU当前时间历元接收导航查询请求总次数
            // this.RSUNaviValidCount_Last = res.data.RSUNaviValidCount_Last;//RSU当前时间历元接收有效导航查询请求次数
            // this.RSUNaviValidCount_Last = res.data.RSUNaviValidCount_Last;//RSU当前时间历元接收到提交路况报告请求次数
            // this.RSUReportRequestValidCount_Last = res.data.RSUReportRequestValidCount_Last;//RSU当前时间历元接收有效路况报告次数
            // this.RRSUReportValidCount_Last = res.data.SUReportValidCount_Last;//RSU当前时间历元过滤后有效路况报告数量

            this.RSU_List[0].number = res.data.RSUNaviValidCount; //接收到有效导航查询次数
            this.RSU_List[1].number =
              res.data.RSUNaviCount - res.data.RSUNaviValidCount; //接收到无效导航查询次数
            this.RSU_List[2].number = res.data.RSUReportRequestValidCount; //接收到路况报告数量
            this.RSU_List[3].number = res.data.RSUReportValidCount; //过滤后有效路况报告数量
            this.RSU_List[4].number =
              res.data.RSUReportRequestValidCount -
              res.data.RSUReportValidCount; //过滤后虚假路况报告数量

            this.RSU_List[5].number = res.data.RSUReportRequestValidCount_temp; //当前时间周期路况报告数量
            this.RSU_List[6].number = res.data.RSUNaviValidCount_Last; //上一时间周期接收到有效导航查询次数
            this.RSU_List[7].number =
              res.data.RSUNaviCount_Last - res.data.RSUNaviValidCount_Last; //上一时间周期接收到无效导航查询次数
            this.RSU_List[8].number = res.data.RSUReportRequestValidCount_Last; //上一时间周期接收到路况报告数量
            this.RSU_List[9].number = res.data.RSUReportValidCount_Last; //上一时间周期过滤后有效路况报告数量
            this.RSU_List[10].number =
              res.data.RSUReportRequestValidCount_Last -
              res.data.RSUReportValidCount_Last; //上一时间周期过滤后虚假路况报告数量
            this.RSU_List[11].number = res.data.RSUNaviPointCount_temp; //上一时间周期过滤后虚假路况报告数量

            //    this.getData();
          } else {
            this.$message({
              message: "请登录",
              type: "error",
            });
          }
        });
    },

    //获取NSP监控信息
    getNSPInfo() {
      this.$http
        .post("NSPInfo", { token: this.$store.state.token })
        .then((res) => {
          //在控制台打印一下后端接口返回的信息
          console.log(res.data);
          if (res.data.result) {
            // this.NSPtrafficInfoCount = res.data.NSPtrafficInfoCount;//NSP接收路况信息总次数
            // this.NSPNaviCount = res.data.NSPNaviCount;//NSP接收路况查询请求总次数
            // this.NSPtrafficInfoCount_Last = res.data.NSPtrafficInfoCount_Last;//NSP当前时间历元接收路况信息次数
            // this.NSPNaviCount_Last = res.data.NSPNaviCount_Last;//NSP当前时间历元接收路况查询请求次数
            this.NSP_List[0].number = res.data.NSPtrafficInfoCount;
            this.NSP_List[1].number = res.data.NSPNaviCount;
            this.NSP_List[2].number = res.data.NSPtrafficInfoCount_Last;
            this.NSP_List[3].number = res.data.NSPNaviCount_Last;
            this.NSP_List[4].number = res.data.NSPNaviPointCount_temp;
            //  this.getData();
          } else {
            this.$message({
              message: "请登录",
              type: "error",
            });
          }
        });
    },
  }
};
</script>

<style scoped>
.home_container {
  height: 100%;
}

.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  color: #ffffff;
  font-size: 20px;
  align-items: center;
}

.el-header logo {
  float: left;
  width: 250px;
  line-height: 70px;
}

.el-header user-name {
  color: #ffffff;
}

.el-main {
  background-color: #eaedf1;
}

.el-row {
  margin-bottom: 20px;
}

.btn {
  border: none;
}

.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}

.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.grid-num {
  font-size: 30px;
  font-weight: bold;
}

.grid-con-icon {
  font-size: 50px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  color: #fff;
}

.grid-con-1 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-1 .grid-num {
  color: rgb(100, 213, 114);
}

.grid-con-2 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-2 .grid-num {
  color: rgb(242, 94, 67);
}

.grid-con-3 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-3 .grid-num {
  color: rgb(45, 140, 240);
}

.user-info {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}

.user-avator {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

.user-info-cont {
  padding-left: 50px;
  flex: 1;
  font-size: 14px;
  color: #999;
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list {
  font-size: 14px;
  color: #999;
  line-height: 25px;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.todo-item-del {
  text-decoration: line-through;
  color: #999;
}
</style>
